1. Aufbau einer Tabelle
2. Tabellenrahmen
3. Tabellenpositionierung
4. Tabellenbreite und -höhe
5. Zellenbreite und -höhe
6. Zellenausrichtung
7. Anmerkungen zu Tabellen
8. Kommentare in HTML

Die Tabelle selbst wird meist als sogenannte blinde Tabelle eingesetzt. D.h. es wird die Struktur einer Tabelle genutzt, die Gitternetzlinien und Trennlinien werden jedoch nicht dargestellt. Die Struktur der Tabelle wird also am Bildschirm nicht sichtbar gemacht.
Ein einfaches Beispiel: Sie wollen wie in der letzten Lektion eine Aufzählung auf Ihrer Seite einbinden. Als Aufzählungspunkte wollen Sie die folgende kleine Grafik verwenden: 
Ihre Tabelle wird zweispaltig. In der linken Spalte wird stets die kleine Grafik eingebunden, und in der rechten Spalte steht der passende Text. Die Zellen der linken Spalte werden ungefähr so groß wie der kleine blaue Punkt selbst. Zum Beispiel so:
 

	Hier steht der Text zum ersten Punkt
	Hier steht der Text zum zweiten Punkt
	Hier steht der Text zum dritten Punkt

Wie gesagt: Die Tabelle mit ihren Randlinien wird nicht sichtbar, nur die Struktur der Tabelle wird genutzt.
 

Eine Tabelle wird erzeugt mit <table> <!-- Tabelleninhalt --></table>

Eine Tabelle ist aufgebaut aus Reihen, und diese Reihen wiederum bestehen aus Zellen.

Mit <tr><!-- Inhalt einer Reihe --></tr> wird eine Reihe in einer Tabelle erzeugt. Und innerhalb dieser Reihe befinden sich die einzelnen Zellen, die mit <td> <!-- Zelleninhalt --></td> erzeugt werden. Die eigentlichen Inhalte einer Tabelle wie Text oder Grafiken befinden sich in den Tabellenzellen, also zwischen <td> und </td>.

Eine Tabelle mit 4 Reihen und jeweils 2 Zellen lautet im HTML-Code:
 

Die obige Tabelle hat folgendes Aussehen:
 

erste Reihe erste Zelle	erste Reihe zweite Zelle
zweite Reihe erste Zelle	zweite Reihe zweite Zelle
dritte Reihe erste Zelle	dritte Reihe zweite Zelle
vierte Reihe erste Zelle	vierte Reihe zweite Zelle

Beispiel:

<Table border="5"> erzeugt eine Tabelle mit einem Rahmen von 5 Pixel Breite.

Die diversen Browser verwenden für die Einstellung der Rahmenlinie unterschiedliche Standardwerte: Lassen Sie diesen Wert nicht unbestimmt, legen Sie die Breite der Rahmenlinie fest!
 

Beispiel:

Die Angaben für Breite und Höhe können in Pixel oder % erfolgen. Eine 300 Pixel breite und 200 Pixel hohe Tabelle wird so erzeugt:
 

In diesem Beispiel sind die Zellen der Tabelle nicht gleich breit. Um die Breite der Zellen einzustellen wird, das <td> Tag erweitert: 

Angenommen, Ihre Tabelle hat eine Breite von 450 Pixel und Sie wollen wie im einleitenden Beispiel eine Aufzählung mit grafischen Listenpunkten erzeugen. In den Zellen der linken Spalte befindet sich jeweils die Grafik, in den Zellen der rechten Spalte der eigentliche Text. Die  kleine Grafik hat eine Breite und Höhe von 10 Pixel.
 

Beachten Sie, dass bei einer mehrreihigen Tabelle die Angabe über die Zellenbreite nur in der ersten Zeile notwendig ist, diese Einstellung gilt automatisch für alle weiteren Zellen.

Beispiel:
 

	erste Reihe zweite Zelle
	zweite Reihe zweite Zelle
	dritte Reihe zweite Zelle
	vierte Reihe zweite Zelle

Die Angaben zur Zellenbreite sind Mindestwerte. Sollte der Zelleninhalt größer sein als die angegebene Breite, wird die Zelle entsprechend vergrößert. Wenn Sie für einzelne Zellen keine Angaben zur Breite machen, berechnet der Browser die Breite. Im letzten Beispiel wurde die Tabellenbreite und die Breite der ersten Zelle angegeben. Die zweite Zelle wird jetzt automatisch auf die Breite = Tabellenbreite minus Breite der ersten Zelle gesetzt. 

Die Zelleninhalte können Sie mit Text, Grafiken oder anderen HTML-Elementen füllen.
 

Beispiel:
Sie wollen drei Grafiken nebeneinander positionieren, wobei die erste Grafik am linken Rand, die zweite genau in der Mitte und die dritte am rechten Rand sitzt.

Erzeugen Sie eine Tabelle mit einer Reihe und drei Zellen, jede Zelle sollte 33% der Tabellenbreite ausfüllen, rein rechnerisch muss eine Zelle leider 34% der Gesamtbreite haben.

Um den Tabellenrahmen zu unterdrücken setzen Sie border="0". Damit sich die Tabelle über das ganze Anzeigefenster erstreckt, setzen Sie width="100%".
 

Es ist an dieser Stelle ratsam, das Einbinden der Grafik ebenfalls mit den Angaben width und height vorzunehmen (aus Gründen der Übersichtlichkeit wurden diese Angaben oben weggelassen):
<img src="links.gif" width="34" height="34">
 

Tipp:
Damit Ihre Tabellenzellen die gewünschte Breite annehmen, dürfen die Zellen nicht leer sein. Fügen Sie ein geschütztes Leerzeichen ein: &nbsp;

In einer zweispaltigen Tabelle befinden sich abwechselnd links und rechts Grafiken. Neben den Grafiken steht Text zu den Grafiken selbst.
 

<td>
<font size="2" color="red" face="verdana">
text text text text 
</font>
</td>

Tipp:
Um leere Tabellenzellen einer gewünschten Breite und/oder Höhe zu erzeugen, fügen Sie eine 1 Pixel große Grafik ein. Um diese Grafik herum erzeugen Sie mit hspace und vspace einen unsichtbaren Rahmen. Angenommen, Sie wollen einen Leerraum von 100 Pixel Breite und 20 Pixel Höhe erzeugen:
<td>
<img src="pixel.gif" width="1" height="1" vspace="10" hspace="50">
</td>
Die Grafik pixel.gif ist genau ein Pixel groß.
Mit jeweils 50 Pixel links und rechts der Grafik erzeugen Sie insgesamt 100 Pixel.
 

Lesen Sie auch folgenden Tipp und laden Sie sich die 1pixel.gif von unserer Seite.

Hinweis
Falls Sie Hinweise, Kritik, Anregungen oder sonstige Kommentare zu dieser oder anderen Lektionen/zum Kurs haben, schicken Sie mir bitte eine Mail.

Sollten Sie länger als 30 Minuten an einem Problem brüten, schicken Sie mir bitte eine Mail.
 

 © Copyright Dr. Horst Jaitner.  Dieser Text ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Bilder ohne Genehmigung , auch auszugsweise, ist strafbar. Das gilt auch für die Verwendung in Kursunterlagen, Vervielfältigung oder Verwendung in elektronischen Systemen.